<template>
  <div class="tw-exhibition" ref="exhibition" :style="{backgroundColor: bgColor}">
  <!-- 首页 -->
  <div class="tw-exhibition-index" v-if="page==='index'">
    <!-- 天气 -->
    <div class="tw-exhibition-weather xindex">{{datatime}}&nbsp;&nbsp;{{weather.weather}}&nbsp;&nbsp;{{weather.temperature}}&#8451;&nbsp;&nbsp;{{weather.winddirection}}风{{weather.windpower}}级&nbsp;&nbsp;湿度{{weather.humidity}}%</div>
    <!-- /天气 -->

    <div>
      <div class="m-pic-index xchangsha">
        <img src="@assets/images/changsha.png" />
      </div>
      <div class="m-pic-bird">
        <img src="@assets/images/birdgif.gif" />
      </div>

      <div class="m-indexitem xstudent" @click="checkMenu(1)">
        <div><div class="m-alight"></div></div>
        <div class="xmenutitle">学生：<span>{{formatNum(indexMenuData.stu)}}</span></div>
      </div>
      <div class="m-indexitem xteacher" @click="checkMenu(2)">
        <div><div class="m-alight"></div></div>
        <div class="xmenutitle">教职工：<span>{{formatNum(indexMenuData.tea)}}</span></div>
      </div>
      <div class="m-indexitem xschool" @click="checkMenu(3)">
        <div><div class="m-alight"></div></div>
        <div class="xmenutitle">学校：<span>{{formatNum(indexMenuData.sch)}}</span></div>
      </div>

      <div class="m-pic-index xyunleft">
        <img src="@assets/images/yunleft.png" />
      </div>
      <div class="m-pic-index xyunright">
        <img src="@assets/images/yunright.png" />
      </div>
      <div class="m-pic-index xmoon">
        <img src="@assets/images/moon.png" />
      </div>

      <div class="m-pic-light xlight1">
        <img src="@assets/images/light1.png" />
      </div>
      <div class="m-pic-light xlight2">
        <img src="@assets/images/light2.png" />
      </div>
      <div class="m-pic-light xlight3">
        <img src="@assets/images/light3.png" />
      </div>

      <div class="m-qipao" :style="{left: qipaoLeft, transform: `scale(${qipaoTransf})`}">
        <div>{{qipaomsg}}</div>
      </div>

      <div class="m-qiuti xa">
        <div class="xtitle1">学前教育</div>
      </div>
      <div class="m-qiuti xg">
        <div style=""></div>
      </div>
      <div class="m-qiuti xb">
        <div class="xtitle2">教育<br />事业发展</div>
      </div>
      <div class="m-qiuti xc">
        <div class="xtitle1">办学条件</div>
      </div>
      <div class="m-qiuti xd">
        <div class="xtitle1">教育改革</div>
      </div>
      <div class="m-qiuti xe">
        <div class="xtitle1">阳光指数</div>
      </div>
      <div class="m-qiuti xf">
        <div class="xtitle2">义务教育优质均衡</div>
      </div>

      <div class="m-qiuti xh">
        <div style=""></div>
      </div>

      <div class="m-chart-index">
        <div style="margin-bottom:5px;margin-top:10px;font-size:18px;font-weight:600">{{indexYear}}</div>
        <div ref="chartindex" style="width:220px;height:180px"></div>
      </div>
    </div>
  </div>
  <!-- /首页 -->

  <!-- 学生 -->
  <div v-else-if="page==='student'" class="tw-exhibition-student">
    <!-- 头部 -->
    <div class="tw-exhibition-header">
      <div class="tw-exhibition-header__hero">
        <h1 :data-text="titlelabel">{{titlelabel}}</h1>
      </div>
      <!-- 天气 -->
      <div class="tw-exhibition-weather">{{datatime}}&nbsp;&nbsp;{{weather.weather}}&nbsp;&nbsp;{{weather.temperature}}&#8451;&nbsp;&nbsp;{{weather.winddirection}}风{{weather.windpower}}级&nbsp;&nbsp;湿度{{weather.humidity}}%</div>
      <!-- /天气 -->
    </div>
    <div class="tw-exhibition-student-body">
      <div class="m-menu-student">
        <img src="@assets/images/menu-student.png" />
        <div class="m-stulight-outer"><div class="m-stulight-middle"><div class="m-stulight"></div></div></div>
      </div>
      <div class="m-menu-pic-yuan1">
        <img src="@assets/images/yuan1.png" />
      </div>
      <div class="m-menu-pic-yuan2">
        <img src="@assets/images/yuan2.png" />
      </div>

      <div class="m-menu-pic-s" v-if="studentMenuId || curMenuId">
        <img :src="require('./assets/images/menu-s'+curMenuId+'.png')" />
        <div style="position:absolute;left:0;top:0" v-if="studentMenuId">
        <img :src="require('./assets/images/menu-s'+studentMenuId+'.png')" />
        </div>

        <!-- <div class="m-stulight-menu-outer xico0" v-if="studentMenuId===1 || curMenuId === 1"><div class="m-stulight-menu-middle"><div class="m-stulight-menu"></div></div></div> -->
        <div class="m-stulight-menu-outer xico1" v-if="studentMenuId===1 || curMenuId === 1"><div class="m-stulight-menu-middle"><div class="m-stulight-menu"></div></div></div>
        <div class="m-stulight-menu-outer xico2" v-if="studentMenuId===2 || curMenuId === 2"><div class="m-stulight-menu-middle"><div class="m-stulight-menu"></div></div></div>
        <div class="m-stulight-menu-outer xico3" v-if="studentMenuId===3 || curMenuId === 3"><div class="m-stulight-menu-middle"><div class="m-stulight-menu"></div></div></div>
        <div class="m-stulight-menu-outer xico4" v-if="studentMenuId===4 || curMenuId === 4"><div class="m-stulight-menu-middle"><div class="m-stulight-menu"></div></div></div>
        <div class="m-stulight-menu-outer xico5" v-if="studentMenuId===5 || curMenuId === 5"><div class="m-stulight-menu-middle"><div class="m-stulight-menu"></div></div></div>
        <div class="m-stulight-menu-outer xico6" v-if="studentMenuId===6 || curMenuId === 6"><div class="m-stulight-menu-middle"><div class="m-stulight-menu"></div></div></div>
        <!-- <div class="m-stulight-menu-outer xico7" v-if="studentMenuId===8 || curMenuId === 8"><div class="m-stulight-menu-middle"><div class="m-stulight-menu"></div></div></div> -->
      </div>

      <!-- <div class="m-menu-pic-ico xico0" @mousemove="studentMenuId=1" @mouseout="studentMenuId=''" @click="checkMenu(1)">
        <img src="@assets/images/ico-0.png" />
        <span>教育阶段</span>
      </div> -->
      <div class="m-menu-pic-ico xico1" @mousemove="studentMenuId=1" @mouseout="studentMenuId=''" @click="checkMenu(1)">
        <img src="@assets/images/ico-1.png" />
        <span>学前教育</span>
      </div>
      <div class="m-menu-pic-ico xico2" @mousemove="studentMenuId=2" @mouseout="studentMenuId=''" @click="checkMenu(2)">
        <img src="@assets/images/ico-2.png" />
        <span>小学教育</span>
      </div>
      <div class="m-menu-pic-ico xico3" @mousemove="studentMenuId=3" @mouseout="studentMenuId=''" @click="checkMenu(3)">
        <img src="@assets/images/ico-3.png" />
        <span>初中教育</span>
      </div>
      <div class="m-menu-pic-ico xico4" @mousemove="studentMenuId=4" @mouseout="studentMenuId=''" @click="checkMenu(4)">
        <img src="@assets/images/ico-4.png" />
        <span>高中教育</span>
      </div>
      <div class="m-menu-pic-ico xico5" @mousemove="studentMenuId=5" @mouseout="studentMenuId=''" @click="checkMenu(5)">
        <img src="@assets/images/ico-5.png" />
        <span>中职教育</span>
      </div>
      <div class="m-menu-pic-ico xico6" @mousemove="studentMenuId=6" @mouseout="studentMenuId=''" @click="checkMenu(6)">
        <img src="@assets/images/ico-7.png" />
        <span>特殊教育</span>
      </div>
      <!-- <div class="m-menu-pic-ico xico7" @mousemove="studentMenuId=8" @mouseout="studentMenuId=''" @click="checkMenu(8)">
        <img src="@assets/images/ico-6.png" />
        <span>高等教育</span>
      </div> -->

      <div class="m-middle-student">
        <div style="display: flex;justify-content: center;margin-bottom:10px;">
          <div class="m-title-outerbutton">
            <div class="m-title-middlebutton">
            <div class="m-title-innerbutton">招生、在校、毕业历年趋势</div>
            </div>
          </div>
        </div>
        <div>
          <div ref="chartstudent1" style="width:500px;height:500px"></div>
        </div>
      </div>
      <div class="m-right-student">
        <div :style="{marginTop: tjmarginTop}">
          <div style="display: flex;justify-content: center;margin-bottom:10px;">
            <div class="m-title-outerbutton">
              <div class="m-title-middlebutton">
              <div class="m-title-innerbutton">{{cxfbLabel}}</div>
              </div>
            </div>
          </div>
          <div>
            <div ref="chartstudent2" style="width:570px;" :style="{height:tjHeight}"></div>
          </div>
        </div>
        <div v-show="curMenuId!==6">
          <div style="display: flex;justify-content: center;margin-bottom:10px;">
            <div class="m-title-outerbutton">
              <div class="m-title-middlebutton">
              <div class="m-title-innerbutton">{{sqznLabel}}</div>
              </div>
            </div>
          </div>
          <div>
            <div ref="chartstudent3" style="width:570px;height:400px"></div>
          </div>
        </div>
      </div>
    </div>
    <a :href="href" class="m-back-index">
      <img src="@assets/images/back.png" />
    </a>
  </div>
  <!-- /学生 -->

  <!-- 老师 -->
  <div v-else-if="page==='teacher'" class="tw-exhibition-teacher">
    <!-- 头部 -->
    <div class="tw-exhibition-header">
      <div class="tw-exhibition-header__hero">
        <h1 :data-text="titlelabel">{{titlelabel}}</h1>
      </div>
      <!-- 天气 -->
      <div class="tw-exhibition-weather">{{datatime}}&nbsp;&nbsp;{{weather.weather}}&nbsp;&nbsp;{{weather.temperature}}&#8451;&nbsp;&nbsp;{{weather.winddirection}}风{{weather.windpower}}级&nbsp;&nbsp;湿度{{weather.humidity}}%</div>
      <!-- /天气 -->
    </div>
    <div class="tw-exhibition-teacher-body">
      <div class="tw-exhibition-teacher-item xitem1">
        <div :style="{marginTop: marginTop}">
          <div class="xtitle">
            <div class="m-title-outerbutton">
              <div class="m-title-middlebutton">
              <div class="m-title-innerbutton">职称(中级及以上)</div>
              </div>
            </div>
          </div>

          <div >
            <div ref="chartteacher1" :style="{height:zcHeight}"></div>
          </div>
        </div>

        <div v-show="marginTop==='0'" style="margin-top:20px">
          <div class="xtitle">
            <div class="m-title-outerbutton">
              <div class="m-title-middlebutton">
              <div class="m-title-innerbutton">班师比</div>
              </div>
            </div>
          </div>

          <div>
            <div ref="chartteacher2" style="height:350px;width:350px;"></div>
          </div>
        </div>
      </div>
      <div class="tw-exhibition-teacher-item xitem2">
        <div class="xtitle" style="margin-left:30px">
          <div class="m-title-outerbutton">
            <div class="m-title-middlebutton">
            <div class="m-title-innerbutton">学历(本科及以上)</div>
            </div>
          </div>
        </div>
        <div>
          <div ref="chartteacher3" style="height:395px;"></div>
        </div>
      </div>
      <div class="tw-exhibition-teacher-item xitem3">
        <div>
          <img src="@assets/images/teacher-index.png" />
          <div class="m-tealight-outer"><div class="m-tealight-middle"><div class="m-tealight"></div></div></div>
        </div>
        <div class="m-teacher-pic-yuan3">
          <img src="@assets/images/yuan3.png" />
        </div>
        <div class="m-teacher-pic-yuan4">
          <img src="@assets/images/yuan4.png" />
        </div>
        <div class="m-teacher-menu1" v-if="curMenuId">
          <img :src="require('./assets/images/menu-t'+curMenuId+'.png')" />
        </div>
        <div class="m-teacher-menu1" v-if="teacherMenuId">
          <img :src="require('./assets/images/menu-t'+teacherMenuId+'.png')" />
        </div>

        <div class="m-teacher-menu">
          <!-- <div class="m-teacher-menu-item xmenu1" @mouseover="teacherMenuId=1" @mouseout="teacherMenuId=''" @click="checkMenu(1)">
            <div class="xname">全部</div>
            <div class="xnum">100000</div>
          </div> -->
          <div class="m-teacher-menu-item xmenu1" @mouseover="teacherMenuId=1" @mouseout="teacherMenuId=''" @click="checkMenu(1)">
            <div class="xname">学前</div>
            <div class="xnum">{{zrjss.xq}}</div>
          </div>
          <div class="m-teacher-menu-item xmenu2" @mouseover="teacherMenuId=2" @mouseout="teacherMenuId=''" @click="checkMenu(2)">
            <div class="xname">小学</div>
            <div class="xnum">{{zrjss.xx}}</div>
          </div>
          <div class="m-teacher-menu-item xmenu3" @mouseover="teacherMenuId=3" @mouseout="teacherMenuId=''" @click="checkMenu(3)">
            <div class="xname">初中</div>
            <div class="xnum">{{zrjss.cz}}</div>
          </div>
          <div class="m-teacher-menu-item xmenu4" @mouseover="teacherMenuId=4" @mouseout="teacherMenuId=''" @click="checkMenu(4)">
            <div class="xname">高中</div>
            <div class="xnum">{{zrjss.gz}}</div>
          </div>
          <div class="m-teacher-menu-item xmenu5" @mouseover="teacherMenuId=5" @mouseout="teacherMenuId=''" @click="checkMenu(5)">
            <div class="xname">中职</div>
            <div class="xnum">{{zrjss.zz}}</div>
          </div>
          <div class="m-teacher-menu-item xmenu6" @mouseover="teacherMenuId=6" @mouseout="teacherMenuId=''" @click="checkMenu(6)">
            <div class="xname">特殊教育</div>
            <div class="xnum">{{zrjss.tj}}</div>
          </div>
        </div>
      </div>
      <div class="tw-exhibition-teacher-item xitem4">
        <div class="xtitle">
          <div class="m-title-outerbutton">
            <div class="m-title-middlebutton">
            <div class="m-title-innerbutton">生师比</div>
            </div>
          </div>
        </div>
        <div>
          <div style="text-align:center;">
            <img src="@assets/images/teacher.png" style="width:45px;height:45px;" />
          </div>
          <div ref="chartteachera" style="height:350px"></div>
        </div>
      </div>
      <div class="tw-exhibition-teacher-item xitem5">
        <div v-show="curMenuId!==6" style="margin-bottom:20px">
        <div class="xtitle">
          <div class="m-title-outerbutton">
            <div class="m-title-middlebutton">
            <div class="m-title-innerbutton">年龄分布</div>
            </div>
          </div>
        </div>
        <div>
          <div ref="chartteacher4" style="height:350px"></div>
        </div>
        </div>
        <div :style="{marginTop: xbmarginTop}">
        <div class="xtitle">
          <div class="m-title-outerbutton">
            <div class="m-title-middlebutton">
            <div class="m-title-innerbutton">性别分布</div>
            </div>
          </div>
        </div>
        <div>
          <div ref="chartteacher5" :style="{height:xbHeight}"></div>
        </div>
        </div>
      </div>
    </div>
    <a :href="href" class="m-back-index">
      <img src="@assets/images/back.png" />
    </a>
  </div>
  <!-- /老师 -->

  <!-- 学校 -->
  <div v-else-if="page==='school'" class="tw-exhibition-school">
    <!-- 头部 -->
    <div class="tw-exhibition-header">
      <div class="tw-exhibition-header__hero">
        <h1 :data-text="titlelabel">{{titlelabel}}</h1>
      </div>
      <!-- 天气 -->
      <div class="tw-exhibition-weather">{{datatime}}&nbsp;&nbsp;{{weather.weather}}&nbsp;&nbsp;{{weather.temperature}}&#8451;&nbsp;&nbsp;{{weather.winddirection}}风{{weather.windpower}}级&nbsp;&nbsp;湿度{{weather.humidity}}%</div>
      <!-- /天气 -->
    </div>
    <div class="tw-exhibition-teacher-body" style="position: relative;">
      <div>
        <div>
          <div class="m-school-map" ref="scatterMap"></div>
          <!-- <div style="margin-left:50px;"><tw-map></tw-map></div> -->
          <div style="background-color: #031532; width: 1050px; height: 600px; left: 80px;top:0px; position: absolute;" v-if="maphidden!=='transparent'">
          </div>
          <!-- <div style="position: absolute;top: 50px;left: 1000px;cursor: pointer;padding: 2px 8px;border: 1px solid #0469f1;z-index:9;border-radius: 5px;color: #00a7fe;" v-if="curAreaId !== 430100" @click="backtop">返回上一级</div> -->
        </div>
        <div style="margin-left:100px">
          <div ref="chartschool1" style="width:1000px;height:350px"></div>
        </div>
      </div>
      <div class="m-school-mobile">
        <div class="xtitle">{{schoolData.name}}</div>
        <div class="m-school-mobile-body">
          <div style="display:flex;color:#ffea97;font-size:20px;margin:20px 0">
            <div class="m-top-title">
              <img src="@assets/images/teacher.png">
              <span>专任教师:{{mapData.zrjs}}人</span>
            </div>
            <div class="m-top-title">
              <img src="@assets/images/student.png">
              <span>学生:{{mapData.zxss}}人</span>
            </div>
          </div>
          <div class="m-pic-schooldetail">
            <div class="xpic-light" :class="inAnimation3?'anim':''" @animationend='inAnimation3=false'>
              <img src="@assets/images/line.png">
            </div>
            <div class="xpic-light" :class="inAnimation3?'anim':''" @animationend='inAnimation3=false'>
              <img src="@assets/images/light.png">
            </div>
            <div class="xpic-one" :class="inAnimation1?'anim':''" @animationend='inAnimation1=false'>
            <img src="@assets/images/one.png">
            </div>
            <div class="xpic-two" :class="inAnimation2?'anim':''" @animationend='inAnimation2=false'>
              <img src="@assets/images/two.png">
            </div>

            <div class="xcontent xone" :class="inAnimation?'anim':''" @animationend='inAnimation=false'>
              <div class="xctitle">教学及辅助用房面积</div>
              <div class="xtotal">{{mapData.jxjfzyfmj}}万平方米</div>
              <div class="xavg">生均:{{mapData.sjjxjfzyfmj}}平方米</div>
            </div>
            <div class="xcontent xtwo" :class="inAnimation?'anim':''" @animationend='inAnimation=false'>
              <div class="xctitle">体育馆面积</div>
              <div class="xtotal">{{mapData.tygmj}}万平方米</div>
              <div class="xavg">生均:{{mapData.sjtygmj}}平方米</div>
            </div>
            <div class="xcontent xthree" :class="inAnimation?'anim':''" @animationend='inAnimation=false'>
              <div class="xctitle">教学仪器设备值</div>
              <div class="xtotal">{{mapData.jxyqsbz}}万元</div>
              <div class="xavg">生均:{{mapData.sjjxyqsbz}}元</div>
            </div>
            <div class="xcontent xfour" :class="inAnimation?'anim':''" @animationend='inAnimation=false'>
              <div class="xctitle">教学用终端（计算机）数</div>
              <div class="xtotal">{{mapData.jxyzds}}台</div>
              <div class="xavg">百名生均:{{mapData.mbmxxyyjxyzds}}台</div>
            </div>
            <div class="xcontent xfive" :class="inAnimation?'anim':''" @animationend='inAnimation=false'>
              <div class="xctitle">教室数量</div>
              <div class="xtotal">{{mapData.jssl}}间</div>
              <!-- <div class="xavg">生均:{{mapData.sjjssl}}间</div> -->
            </div>
            <div class="xcontent xsix" :class="inAnimation?'anim':''" @animationend='inAnimation=false'>
              <div class="xctitle">网络多媒体教室</div>
              <div class="xtotal">{{mapData.wldmtjs}}间</div>
              <!-- <div class="xavg">生均:{{mapData.sjwldmtjs}}间</div> -->
            </div>
            <div class="xcontent xseven" :class="inAnimation?'anim':''" @animationend='inAnimation=false'>
              <div class="xctitle">图书数量</div>
              <div class="xtotal">{{mapData.tssl}}册</div>
              <div class="xavg">生均:{{mapData.sjts}}册</div>
            </div>
          </div>

          <div v-show="schoolData.schoolshow">
          <div class="m-phone-button" v-show="false">
            <div class="m-colorline"></div>
            <div class="m-title-outerbutton">
              <div class="m-title-middlebutton">
              <div class="m-title-innerbutton">学生流向分析</div>
              </div>
            </div>
          </div>

          <div v-show="false">
            <div ref="chartschool2" style="width:560px;height:250px"></div>
          </div>

          <div class="m-phone-button">
            <div class="m-colorline"></div>
            <div class="m-title-outerbutton">
              <div class="m-title-middlebutton">
              <div class="m-title-innerbutton">校园监控</div>
              </div>
            </div>
          </div>

          <div style="display:flex;flex-wrap: wrap; padding: 10px 25px; justify-content: space-between;">
            <tw-camera
              v-for="(camera,index) in cameras"
              :index="index"
              :key="index"
              :currentCarema="camera"
              :cameraError="camera.err">
            </tw-camera>
          </div>
          </div>

        </div>
      </div>
    </div>
    <!-- <div @click="backIndex" class="m-back-index"> -->
    <a :href="href" class="m-back-index" style="bottom:20px">
      <img src="@assets/images/back.png" />
    </a>
  </div>
  <!-- /学校 -->

  </div>
</template>

<script>
import props from './props'
import schoolMixins from './school'
import studentMixins from './student'
import teacherMixins from './teacher'

import AMapLoader from '@amap/amap-jsapi-loader'
import TwProgress from './tw-progress.vue'
import TwCamera from './tw-camera.vue'
// import TwMap from './tw-map.vue'
import img5a from '@assets/images/student.png'
import { clearInterval } from 'timers'
let myChart = null
let map = null

export default {
  name: 'exhibition-changsha-index',

  mixins: [schoolMixins, studentMixins, teacherMixins],

  components: {
    TwProgress,
    TwCamera,
    // TwMap
  },

  props,

  data() {
    return {
      datatime: '2020年8月18日',
      weathertimer: null,
      indexchart: null,
      page: 'index',
      weather: {
        humidity: '0',
        reporttime: '2020年8月18日',
        temperature: '0',
        weather: '晴',
        winddirection: '东',
        windpower: '≤1'
      },
      indexMenuData: {
        stu: 0,
        tea: 0,
        sch: 0
      },
      indexYear: '',
      qipaomsg: '张晓琴上传了一张照片',
      qipaoLeft: '1000px',
      qipaoTransf: 1,
      timeInterval: null,
      optionindex: {
        color: this.colors,
        legend: {
          itemHeight: 6,
          itemWidth: 12,
          icon: 'roundRect',
          textStyle: {
            color: '#bad3ff',
            fontSize: 14,
            padding: [3, 0, 0, 0]
          }
        },
        grid: {
          left: 5,
          top: 25,
          right: 15,
          bottom: 25
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: [{
          type: 'log',
          show: false,
          boundaryGap: false
        }],
        dataset: {
          source: []
        },
        series: []
      },

      // school


      // teacher
      curAreaId: 430100,


      // student

      option: {
        color: this.colors,
        legend: {
          itemHeight: 6,
          itemWidth: 12,
          icon: 'roundRect',
          textStyle: {
            color: '#bad3ff',
            fontSize: 14,
            padding: [3, 0, 0, 0]
          }
        },
        grid: {
          left: 45
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          show: true,
          boundaryGap: this.page === 'teacher' ? false : true,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(148,170,212,1)'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
              color: '#bad3ff'
            }
          },
          splitLine: {
            lineStyle: {
              color: [
                'rgba(148,170,212,0.4)'
              ]
            }
          }
        },
        yAxis: {
          type: 'value',
          show: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(148,170,212,1)'
            }
          },
          axisLabel: {
            show: true,
            formatter: '{value}',
            textStyle: {
              fontSize: 14,
              color: '#bad3ff'
            }
          },
          splitLine: {
            lineStyle: {
              color: [
                'rgba(148,170,212,0.4)'
              ]
            }
          }
        },
        dataset: {
          source: []
        },
        series: [
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' }
        ]
      }
    }
  },

  computed: {
    bkgImg () {
      if (this.teacherMenuId === 0) {
        return `url('~@assets/images/menu-t1.png')`
      } else {
        return 'transparent'
      }
    },
  },

  methods: {
    init () {
      if (!this.indexchart) {
        this.indexchart = window.echarts.init(this.$refs.chartindex)
      }
      this.getIndexChartData()
      this.getQipaoMsg()
    },
    getQipaoMsg () {
      let vm = this
      let qipao = [
        '张老师编辑了一个考卷',
        '李同学参加了一次考试',
        '王老师上传了两个图片',
        '龙学生回答了一个问题',
        '陈校长编辑了一个公告',
        '马同学处理了一个错误',
        '刘班主任发布一个作业',
        '向学生答题完成100%',
        '罗学生上传了一个作业',
        '罗学生上传了一个作业',
        '罗学生上传了一个作业',
        '罗学生上传了一个作业',
        '罗学生上传了一个作业',
        '柳学生上传了一个作业',
      ]
      this.timeInterval = setInterval(function () {
        let a = Math.floor(Math.random() * 10) + 1
        let b = Math.floor(Math.random() * 1000) + 500
        vm.qipaomsg = qipao[a]

        vm.qipaoLeft = b + 'px'
        vm.qipaoTransf = (a + 1) / 10
      }, 6000)
    },
    setMenuAuto () {
      let vm = this

      this.timeInterval = setInterval(function () {
        vm.curMenuId = vm.curMenuId + 1
        if (vm.page === 'teacher') {
          if (vm.curMenuId > 6) {
            vm.curMenuId = 1
          }

          vm.$nextTick(() => {
            // vm.initTea()
            vm.setTeaOption()
          })
        } else if (vm.page === 'student') {
          if (vm.curMenuId > 6) {
            vm.curMenuId = 1
          }

          vm.$nextTick(() => {
            // vm.initStu()
            vm.setOptionstu()
          })
        }
      }, 10000)
    },

    setOption () {
      let length = this.indexChartData[0].length
      let a = this.optionindex.dataset
      a.source = this.indexChartData
      this.optionindex.series = []

      for (let i = 0; i < length - 1; i++) {
        if (i === 2) {
          this.optionindex.series.push({
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(74,199,255,0)'
              }, {
                offset: 1,
                color: 'rgba(74,199,255,0.35)'
              }])
            }
          })
        } else {
          this.optionindex.series.push({
            type: 'line',
            smooth: true
          })
        }
      }
      this.indexchart.setOption(this.optionindex, true)
    },
    getIndexChartData () {
      let vm = this
      let getwayurl = window.$twApp.gateway
      if (this.baseurls.length > 0 && this.baseurls[0].indexOf('http:') > -1) {
        getwayurl = this.baseurls[0]
      }
      let url = getwayurl + '/tw-cloud-datatheme-server/themedata/dp_xxgk_sxx'
      let quary = { 'conditions': [{ "fieldName": "jgid", "operator": "IN", "fieldValues": ["430100000000"], "prepender": "AND"}], 'fields': [], 'orderMethods': [] }
      let orderMethods = { 'field': 'tjnf', 'method': 'ASC' }
      quary.orderMethods.push(orderMethods)

      this.indexChartData = []
      window.axios.post(url, quary).then(res => {
        if (res.data && res.data.pageInfo && res.data.pageInfo.list.length > 0) {
          let resdata = []
          res.data.pageInfo.list.forEach((item, index) => {
            if (index === 0) {
              let a = ['统计数据', '学生', '教职工', '学校']
              resdata.push(a)
              this.indexYear = '中小学（' + item.tjnf + ' - '
            }

            if (parseInt(item.tjnf) <= 2017) {
              let b = [item.tjnf, item.zxss, item.jzgs, item.xxs]
              resdata.push(b)
            }

            if (index === res.data.pageInfo.list.length - 1) {
              this.indexMenuData = { stu: item.zxss, tea: item.jzgs, sch: item.xxs }
              this.indexYear = this.indexYear + '2017' + '）'
            }
          })
          this.indexChartData = resdata

          this.setOption()
        }
      }).catch(err => {
        console.error(err)
      })
    },

    resize () {
      this.indexchart.resize({
        width: this.$el.offsetWidth,
        height: this.$el.offsetHeight
      })
    },

    getWeather () {
      let vm = this
      window.axios.get('https://open.teewon.net:9009/openapi-weather/getWeatherInfo?city=430100&ip=&extensions=base').then(res => {
        if (res.data && res.data.responseEntity && res.data.responseEntity.lives.length > 0) {
          vm.weather = res.data.responseEntity.lives[0]
        }
      }).catch(err => {
        console.error(err)
      })
    },
    backIndex () {
      if (this.timeInterval) {
        window.clearInterval(this.timeInterval)
      }
      this.page = 'index'

      this.$nextTick(() => {
        this.init()
      })
    },

    // school
    initNewMap () {
      let vm = this

      AMapLoader.load({
        'key': '4daa78d371fcbec403897e8ccc0c408c',   // 申请好的Web端开发者Key，首次调用 load 时必填
        'version': '1.4.15',   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        'plugins': [],  // 插件列表
        'AMapUI': {             // 是否加载 AMapUI，缺省不加载
          'version': '1.1',   // AMapUI 缺省 1.1
          'plugins':['geo/DistrictExplorer', 'misc/PointSimplifier'],       // 需要加载的 AMapUI ui插件
        },
        'Loca':{                // 是否加载 Loca， 缺省不加载
          'version': '1.3.2'  // Loca 版本，缺省 1.3.2
        }
      }).then((AMap)=>{
        vm.maphidden = '#031532'
        vm.map = new AMap.Map(vm.$refs.scatterMap, {
          viewMode: '2D',
          mapStyle: 'amap://styles/563ccfbe13786e73a2fcd9340a89a6d6',
          pitch: 0,
          features: ['bg', 'road'],
          zoom: 9,
          center: [112.968743, 28.192929],
          resizeEnable: true,
          skyColor: '#031532' // '#05388f'
        })
        let map = vm.map

        let districtExplorer = new AMapUI.DistrictExplorer({
          eventSupport: true, //打开事件支持
          map: map
        })

        let currentAreaNode = null

        districtExplorer.on('outsideClick', function(e) {
          districtExplorer.locatePosition(e.originalEvent.lnglat, function(error, routeFeatures) {
            // console.log('routeFeatures', routeFeatures)
            if (vm.curAreaId !== 430100) {
              vm.loadAreaNode(430100, districtExplorer)
              vm.getXXSData()
            }
          }, {
            levelLimit: 2
          })
        });

        districtExplorer.on('featureClick', function(e, feature) {
          let props = feature.properties
          // 如果存在子节点
          if (vm.curAreaId === 430100) {
            // 切换聚焦区域
            vm.loadAreaNode(props.adcode, districtExplorer)
            if (vm.curAreaId !== 430100) {
              vm.getXXSData()
            }
          }
        })

        let buildlayers = new AMap.Buildings({
          zooms: [12, 18],
          zIndex: 10
          // heightFactor: 2 // 2倍于默认高度，3D下有效
        })
        vm.map.add(buildlayers)

        vm.loadAreaNode(430100,districtExplorer)

        let pointSimplifierIns = new AMapUI.PointSimplifier({
          map: map, //所属的地图实例
          autoSetFitView: false, //禁止自动更新地图视野
          zIndex: 200,
          getPosition: function(item) {
            if (!item) {
              return null
            }
            //返回经纬度
            return item.value
          },
          getHoverTitle: function(dataItem, idx) {
            // console.log(dataItem)
            return dataItem.name
          },
          renderOptions: {
            //点的样式
            pointStyle: {
              width: vm.curAreaId === 430100 ? 3 : 5,
              height: vm.curAreaId === 430100 ? 3 : 5,
              fillStyle: '#ffea92'
            },
            //鼠标hover时的title信息
            hoverTitleStyle: {
              position: 'top'
            }
          }
        })
        vm.pointSimplifierIns = pointSimplifierIns

        vm.map.on("complete", function () {
          vm.maphidden = 'transparent'

          // distCluster.setData(dddata)
          vm.getMapSchool().then(() => {
            let effData = []
            if (vm.curAreaId === 430100) {
              effData = vm.mapSchoolData.filter(itm => itm.bxlxfz === vm.selectBarName)
            } else {
              effData = vm.mapSchoolData.filter(itm => itm.bxlxfz === vm.selectBarName && parseInt(itm.xzqhm) === vm.curAreaId)
            }

            pointSimplifierIns.setData(effData)
            vm.refreshNewMap(pointSimplifierIns)
          })
        })
        map.on('zoomend', function () {
          vm.refreshNewMap(pointSimplifierIns)
        })
        pointSimplifierIns.on('pointClick', function (e, p) {
          vm.getSchoolData(p.data)
        })
      }) // 结束
    },
    refreshNewMap (pointSimplifierIns) {
      let vm = this
      let zoom = vm.map.getZoom()
      //获取 pointStyle
      let pointStyle = pointSimplifierIns.getRenderOptions().pointStyle
      pointStyle.fillStyle = vm.effectcolor
      //根据当前zoom调整点的尺寸
      if (vm.curAreaId === 430100) {
        pointStyle.width = pointStyle.height = 3
      } else {
        pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, vm.map.getZoom() - 2)
      }
    },
    loadAreaNode (adcode, districtExplorer) {
      let vm = this
      // let colors = ['#1890ff', '#ffb686', '#ffe666', '#11c9aa', '#a694ff', '#fb6c84', '#91dcf2', '#91dcf2']
      let colors = ['#0049ff', '#0049ff', '#0049ff', '#0049ff', '#0049ff', '#0049ff', '#0049ff', '#0049ff']
      if (vm.curAreaId === adcode && vm.curAreaId !== 430100) {
        return
      }
      vm.curAreaId = adcode
      districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
        //更新地图视野
        vm.map.setBounds(areaNode.getBounds(), null, null, true)
        //清除已有的绘制内容
        districtExplorer.clearFeaturePolygons()

        //绘制子区域
        districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
          let fillColor = colors[i % colors.length]
          let strokeColor = '#88d2ff' // vm.colors[vm.colors.length - 1 - i % vm.colors.length]

          return {
            cursor: 'default',
            bubble: true,
            strokeColor: strokeColor, //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: fillColor, //填充色
            fillOpacity: 0.5, //填充透明度
          }
        })

        //绘制父区域
        districtExplorer.renderParentFeature(areaNode, {
          cursor: 'default',
          bubble: true,
          strokeColor: '#88d2ff', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 1, //线宽
          fillColor: vm.curAreaId === 430100 ? null : '#0049ff', //填充色
          fillOpacity: 0.35, //填充透明度
        })
        districtExplorer.setAreaNodesForLocating([areaNode])

        if (vm.pointSimplifierIns) {
          vm.setNewMapData()
        }
      })
    },
    setNewMapData () {
      let vm = this
      let effData = []
      if (vm.curAreaId === 430100) {
        effData = vm.mapSchoolData.filter(itm => itm.bxlxfz === vm.selectBarName)
      } else {
        effData = vm.mapSchoolData.filter(itm => itm.bxlxfz === vm.selectBarName && parseInt(itm.xzqhm) === vm.curAreaId)
      }

      vm.pointSimplifierIns.setData(effData)
      vm.refreshNewMap(vm.pointSimplifierIns)
      if (effData.length > 0) {
        vm.getSchoolData(effData[0])
      }
    },
    // searchCity (adcode) {
    //   let vm = this
    //   if (myChart) {
    //     myChart.dispose()
    //     myChart = null
    //   }
    //   AMapLoader.load({
    //     'key': '4daa78d371fcbec403897e8ccc0c408c',   // 申请好的Web端开发者Key，首次调用 load 时必填
    //     'version': '2.0',   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //     'plugins': ['Map3D','ElasticMarker','AMap.DistrictSearch','AMap.ControlBar','AMap.Heatmap'],  // 插件列表
    //     'AMapUI': {             // 是否加载 AMapUI，缺省不加载
    //       'version': '1.1',   // AMapUI 缺省 1.1
    //       'plugins':[],       // 需要加载的 AMapUI ui插件
    //     },
    //     // 'Loca':{                // 是否加载 Loca， 缺省不加载
    //     //   'version': '1.3.2'  // Loca 版本，缺省 1.3.2
    //     // }
    //   }).then((AMap)=>{
    //     map = new AMap.Map(vm.$refs.scatterMap, {
    //       resizeEnable: false,
    //       showEffectOn: 'emphasis',
    //       center: [116.30946, 39.937629],
    //       zoom: 12
    //     })
    //     AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
    //       let districtExplorer = (window.districtExplorer = new DistrictExplorer({
    //         eventSupport: true, // 打开事件支持
    //         map: map
    //       }))
    //       districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
    //         if (error) {
    //           console.error(error)
    //           return
    //         }

    //         // 这里判断一下
    //         let Json = areaNode.getSubFeatures()
    //         // 说明当前是市级别了,将这个值存起来
    //         if (Json.length > 0 && Json[0].properties.level == 'district') {
    //           this.parentJson = Json
    //           // console.log('parentJson', this.parentJson)
    //         } else if (Json.length === 0) { // 说明当前是县级
    //           Json = this.parentJson.filter(item => {
    //             if (item.properties.adcode === adcode) {
    //               return item
    //             }
    //           })
    //           if (Json.length === 0) return
    //         }

    //         this.getMapData(Json)
    //       })
    //     })
    //   }).catch(e => {
    //     console.log(e)
    //   })
    //   this.maphidden = '#031532'
    // },

    // teacher

    setAOption (data) {
      let vm = this
      let img5 = {
        a: img5a,
        b: img5a
      }

      // let value = 1 // >0

      let option = {
        grid: {
          left: "5%",
          top: "5%",
          bottom: "3%",
          right: "5%",
          containLabel: true
        },
        tooltip: {
          trigger: "item",
        },
        yAxis: {
          minInterval: 1,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(148,170,212,0.4)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(148,170,212,1)'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
              color: '#bad3ff'
            }
          },
          axisTick: {
            show: false
          }
        },
        xAxis: {
          type: "category",
          inverse: false,
          data: vm.curMenuId === 6 ? ["长沙"] : ["长沙", "全国", "英国", "美国"],
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(148,170,212,1)'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
              color: 'rgba(148,170,212,0.4)'
            }
          },
          axisLabel: {
            margin: 15,
            textStyle: {
              color: "#bad3ff",
              fontSize: 14,
            }
          }
        },
        series: [{
          z: 6,
          type: "pictorialBar",
          symbolSize: ['20', '20'],
          animation: true,
          symbolRepeat: "fixed",
          symbolClip: true,
          symbolPosition: "start",
          symbolOffset: [0, 0],
          data: vm.curMenuId === 6 ? [{
            value: data.ssb,
            symbol: 'image://' + img5.a,
          }] : [{
            value: data.ssb,
            symbol: 'image://' + img5.a,
          },
          {
            value: data.qg_ssb,
            symbol: 'image://' + img5.a,
          },
          {
            value: data.yg_ssb,
            symbol: 'image://' + img5.a,
          },
          {
            value: data.mg_ssb,
            symbol: 'image://' + img5.a,
          }],
          label: {
            normal: {
              show: false
            }
          }
        }, {
          type: "bar"
        }]
      }

      this.charta.setOption(option, true)
    },

    // student
    checkMenu (menuid) {
      if (this.timeInterval) {
        window.clearInterval(this.timeInterval)
      }

      if (this.page === 'index') {
        this.curMenuId = 1 // 首页跳转都改成1
        if (menuid === 1) {
          this.page = 'student'
          this.titlelabel = '学生'
          this.$nextTick(() => {
            this.initStu()
            this.setMenuAuto()
          })
        } else if (menuid === 2) {
          this.page = 'teacher'
          this.titlelabel = '专任教师'
          this.$nextTick(() => {
            this.initTea()
            this.setMenuAuto()
          })
        } else if (menuid === 3) {
          this.page = 'school'
          this.titlelabel = '学校'
          this.curAreaId = 430100
          this.effectcolor = '#ffea92'
          // this.schoolData.name = '长沙市'
          // this.schoolData.schoolshow = false
          this.$nextTick(() => {
            this.initSch()
          })
        }
      } else if (this.page === 'student') {
        this.curMenuId = menuid
        // this.initStu()
        this.setOptionstu()
      } else if (this.page === 'teacher') {
        this.curMenuId = menuid
        // this.initTea()
        this.setTeaOption()
      }
    },

    formatNum (strNum) {
      let newStr = ''
      let count = 0
      let str
      if (typeof (strNum) === 'string') {
        return strNum
      }
      if (strNum === undefined) {
        return ''
      }
      if (strNum === null) {
        return null
      }
      str = strNum.toString()
      // 当数字是整数
      if (str.indexOf('.') === -1) {
        for (let i = str.length - 1; i >= 0; i--) {
          if (count % 3 === 0 && count !== 0) {
            newStr = str.charAt(i) + ',' + newStr
          } else {
            newStr = str.charAt(i) + newStr
          }
          count++
        }
        str = newStr
        return str
      } else {
        // 当数字带有小数
        for (let i = str.indexOf('.') - 1; i >= 0; i--) {
          if (count % 3 === 0 && count !== 0) {
            newStr = str.charAt(i) + ',' + newStr
          } else {
            newStr = str.charAt(i) + newStr // 逐个字符相接起来
          }
          count++
        }
        str = newStr + (str + '00').substr((str + '00').indexOf('.'), 3)
        return str
      }
    }
  },

  mounted () {
    let vm = this
    if(this.$ui.urlQuery.usertype) {
      this.page = this.$ui.urlQuery.usertype
    }

    // window.aaa = this
    if (this.page === 'index') {
      this.$nextTick(() => {
        vm.init()
      })
    } else if (this.page === 'student') {
      this.titlelabel = '学生'
      this.$nextTick(() => {
        vm.initStu()
        vm.setMenuAuto()
      })
    } else if (this.page === 'teacher') {
      this.titlelabel = '专任教师'
      this.$nextTick(() => {
        vm.initTea()
        vm.setMenuAuto()
      })
    } else if (this.page === 'school') {
      this.titlelabel = '学校'
      this.curAreaId = 430100
      this.effectcolor = '#ffea92'
      this.$nextTick(() => {
        vm.initSch()
      })
    }

    this.getWeather()
    // 这里尽量用ref去获取节点
    // this.myChart = window.echarts.init(this.$refs.scatterMap)

    // window.addEventListener('resize', this.resize)
    this.weathertimer = setInterval(() => {
      let today = new Date()
      vm.datatime = today.toISOString().substring(0, 10) + ' ' + today.toTimeString().substring(0, 9)
      if (today.toTimeString().substring(0, 8) === '00:00:01') {
        vm.getWeather()
      }
    }, 1000)
  },

  beforeDestroy () {
    if (map && this.page === 'school') {
      // myChart.dispose()
      // myChart = null
      map.destroy()
      map = null
    }
    if (this.indexchart) {
      this.indexchart.dispose()
      this.indexchart = null
    }
    if (this.timeInterval) {
      window.clearInterval(this.timeInterval)
    }
    if (this.weathertimer) {
      window.clearInterval(this.weathertimer)
    }
  },

  watch: {
    // data: {
    //   deep: true,
    //   handler () {
    //     this.setOption()
    //   }
    // },

    baseurls: {
      deep: true,
      handler () {
        this.$nextTick(() => {
          this.init()
        })
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
